<? require_once 'inc/header.php';

$albums = new Albums();
$albumsList = $albums->getAlbums();

?>

<div class="main">
    
    <div class="center">
        <ul class="menu">
            <li><a href="/index.php" class="btn btn-active">Альбомы</a></li>
            <li><a href="tv/all_events.php" class="btn">События</a></li>
        </ul>

        <div id="user-info" class="h">
			<span id="user-name"></span>
			<span id="user-lastname"></span>
		</div>
	</div>
    <div class="clear"></div>
    <fieldset><legend><h1>Все альбомы</h1></legend></fieldset>
    <a href="add_albums.php" class="btn add_button"><i class="ico">+</i>&nbsp;&nbsp;&nbsp;Добавление альбома</a>
    <? if ($albums): ?>
    <ul class="events">
        <? $i = 0 ?>
        <? foreach ($albumsList as $album): ?>

        <? $i++ ?>
        <li <?= $i <= 3 ? 'class="wide"' : ''?> > <a href="album.php?id=<?=$album['album_id']?>" class="img" style="background-image: url('<?=reset($album['photos'])?>');" title="Редактировать альбом" ></a>
            <div class="desc" onmouseover="tooltip.getTooltip('<?=$album['album_id']?>', '<?=$album['album_autor']?>', '<?=$album['album_date']?>')" onmouseout="tooltip.hideTooltip('<?=$album['album_id']?>')">

                <div class="title"><?= ($i <= 3) ? $album['album_name']: substr($album['album_name'], 0, 30) . '...'?></div>
                <? if ($album['photos']):?>
                <div class="count-photos" >Фотографий в альбоме: <?=count($album['photos'])?></div>
                <?endif?>
                
                <div class="tooltip h" id="tooltip_<?=$album['album_id']?>"></div>
            </div>
        </li>
        <? endforeach ?>
    </ul>
    <div class="clear"></div>
    <? endif ?>

</div>
<script type="text/javascript">
    var tooltip = {
        getTooltip: function (id, autor, date) {
            $('#tooltip_'+id).html('<span>Автор: '+autor+'</span><br><span>Дата: '+date+'</span><br>');
            $('#tooltip_'+id).show();
        },

        hideTooltip: function (id) {
            $('#tooltip_'+id).hide();
        }
    }

</script>
<? require_once $_SERVER['DOCUMENT_ROOT'] . '/inc/footer.php'; ?>